<table class="ui table selectable width35 definition">
    <tbody v-if="headers.length == 0">
    <tr>
        <td colspan="3" class="normal">
            <a class="disabled">[暂时还没有自定义Header]</a>
        </td>
    </tr>
    </tbody>
    <tbody v-for="(header, index) in headers">
    <tr v-if="!header.editing">
        <td class="title">{{header.name}}</td>
        <td>{{header.value}}</td>
        <td class="two op">
            <a href="" title="修改" v-on:click.prevent="editHeader(index, header)"><i class="ui icon edit small"></i> </a>
            <a href="" title="删除" v-on:click.prevent="deleteHeader(index)"><i class="ui icon remove small"></i> </a>
        </td>
    </tr>
    <tr v-if="header.editing">
        <td class="title">
            <input type="text" name="name" v-model="headerEditingName" placeholder="Name"/>
        </td>
        <td>
            <input type="text" name="value" v-model="headerEditingValue" placeholder="Value"/>
        </td>
        <td class="two op">
            <a href="" v-on:click.prevent="editHeaderSave(index, header)" title="保存"><i class="ui icon check circle"></i> </a>
            <a href="" v-on:click.prevent="editHeaderCancel(index, header)" title="取消"><i class="ui icon arrow left circle"></i> </a>
        </td>
    </tr>
    </tbody>
    <tbody v-if="headerAdding">
    <tr>
        <td class="title">
            <input type="text" name="name" v-model="headerAddingName" placeholder="Name"/>
        </td>
        <td>
            <input type="text" name="value" v-model="headerAddingValue" placeholder="Value"/>
        </td>
        <td class="two op">
            <a href="" v-on:click.prevent="addHeaderSave()" title="保存"><i class="ui icon check circle"></i> </a>
            <a href="" v-on:click.prevent="addHeader()" title="取消"><i class="ui icon arrow left circle"></i> </a>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td colspan="3"><a href="" v-on:click.prevent="addHeader()"><i class="ui icon plus circle"></i>添加新Header</a></td>
    </tr>
    </tbody>
</table>

<h4>屏蔽Header</h4>
<table class="ui table selectable width30 definition">
    <tbody v-if="ignoreHeaders.length == 0">
    <tr>
        <td colspan="2" class="normal">
            <a class="disabled">[暂时还没有屏蔽任何Header]</a>
        </td>
    </tr>
    </tbody>
    <tbody v-for="(header, index) in ignoreHeaders">
    <tr v-if="!header.isEditing">
        <td>{{header.name}}</td>
        <td class="two op">
            <a href="" title="修改" v-on:click.prevent="editIgnoreHeader(index, header)"><i class="ui icon edit small"></i> </a>
            <a href="" title="删除" v-on:click.prevent="deleteIgnoreHeader(index)"><i class="ui icon remove small"></i> </a>
        </td>
    </tr>
    <tr v-if="header.isEditing">
        <td>
            <input type="text" name="name" v-model="ignoreHeaderEditingName"/>
        </td>
        <td class="two op">
            <a href="" v-on:click.prevent="editIgnoreHeaderSave(index, header)" title="保存"><i class="ui icon check circle"></i> </a>
            <a href="" v-on:click.prevent="editIgnoreHeader(index, header)" title="取消"><i class="ui icon arrow left circle"></i> </a>
        </td>
    </tr>
    </tbody>

    <!-- 添加 -->
    <tbody v-if="ignoreHeaderAdding">
    <tr>
        <td>
            <input type="text" name="name" placeholder="Name"  v-model="ignoreHeaderAddingName"/>
        </td>
        <td class="two op">
            <a href="" v-on:click.prevent="addIgnoreHeaderSave()" title="保存"><i class="ui icon check circle"></i> </a>
            <a href="" v-on:click.prevent="addIgnoreHeader()" title="取消"><i class="ui icon arrow left circle"></i> </a>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td colspan="2"><a href="" v-on:click.prevent="addIgnoreHeader()"><i class="ui icon plus circle"></i>添加要屏蔽的Header</a></td>
    </tr>
    </tbody>
</table>